<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
<style>
	html, body, #app {
		width: 99%;
		height: 99%;
		font-size: 14px;
	}
	.el-container{
		width: 100%;
		height: 100%;
	}
	.el-header{
		width: 100%;
		padding-left: 1%;
	}
	.el-main{
		padding-left: 1%;
	}
	iframe{
		width: 98%;
        height: 98%;
	}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="所有订单" name="first"></el-tab-pane>
    <el-tab-pane label="待发货" name="second"></el-tab-pane>
    <el-tab-pane label="运输中" name="six"></el-tab-pane>
    <el-tab-pane label="退款审核订单" name="five"></el-tab-pane>
    <el-tab-pane label="已退货" name="fourth"></el-tab-pane>
    <el-tab-pane label="已完成" name="seven"></el-tab-pane>
  </el-tabs>
</el-header>
  <el-main>
	<iframe :src="getUrl()"></iframe>
</el-main>
</el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		url: 'first.html',
		orderInfo: [],
		activeName: 'first',
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event); 
	      },
	      //界面切换
	      getUrl() {  
	            switch (this.activeName) {  
	                case 'first': return 'first.html';  
	                case 'second': return 'second.html';  
	                case 'fourth': return 'fourth.html';
	                case 'five': return 'five.html';
	                case 'six': return 'six.html';
	                case 'seven': return 'seven.html';
	                default: return 'first.html';  
	            }  
	        }
	},
	created(){
		
	},
	computed: {
		
	}
});
</script>
</body>
</html>